<template>
  <div class="mine-box">
    <div class="user-box-title" :style="back">
      <adminuserinfo></adminuserinfo>
    </div>
    <div class="yue-box">
      <mu-flex class="flex-wrapper yue-title" align-items="center">
        <mu-flex class="yue-title"  fill>余额</mu-flex>
        <mu-flex class="yue-title"  fill> <span class="fuhao">¥</span>{{this.MyData}}</mu-flex>
        <mu-flex justify-content="end" fill><mu-button :style="{color:color}" :disabled="tixianUnavailble" small round color="#058aa1" @click="showtixian">提现</mu-button></mu-flex>
      </mu-flex>
      <mu-button class="btn" @click="showdiv">账号设置</mu-button>
    </div>
    <accounts ref="accounts"></accounts>
    <tixian ref="tixian" @tixianUnavailable="handleTixianUnavailable"></tixian>
  </div>
</template>

<script>
import accounts from "@/components/global/accounts";
import tixian from "@/components/global/tixian";
import { Toast } from "vant";
export default {
  data() {
    return {
      MyData:'0',
        color:'white',
        tixianUnavailble:false,
      back: {

        background:
          "url(" + require("../../../assets/image/minebackimg.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover"
      }
    };
  },
   components: {
    accounts: accounts,
   tixian: tixian
  },
  mounted(){
    this.$api.getMyData().then(res=>{
      this.MyData = res.data.data.amount
    })
  },
   methods: {
       handleTixianUnavailable(){
           this.tixianUnavailble=true
           this.color="#999"
       },
       showtixian() {
           if(this.tixianUnavailble){
               Toast('当前可提现余额为0，无法提现')
               return false
           }
           this.$api.userInfo().then(res=>{
               if(res.data.message.status==200&&res.data.data.weixinOpenid!=null){
                   this.$refs.tixian.Showtixiandiv();
               }else {
                   Toast('请先绑定微信')
                   this.$router.push("/admin/balance")
               }
           })
       },
    showdiv() {
      this.$refs.accounts.Showaccountsdiv();
    },
   }
};
</script>

<style>
  .tixianDisabledBtn{
    background: #9ca3a5!important;
  }
</style>
